<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息：{{msg}}</h2>
  <button @click="msg=msg+'12'">修改msg</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪水：{{person.job.j.sa}}k</h2>
  <button @click="person.name+='qwe'">增长姓名</button><hr>
  <button @click="person.age+=1">增长年龄</button><hr>
  <button @click="person.job.j.sa++">涨薪</button>
</template>

<script>
    import {reactive, ref,watch} from 'vue'
    export default {
        name: "Demo",
        setup(){
            let sum = ref(666)
            let msg = ref('qwe')
            let person =reactive({
                name:'张三',
                age:18,
                job:{
                    j:{
                        sa:20
                    }
                }
            })

            //情况一：监视ref所定义的一个响应式数据
            /* watch(sum,(newValue,oldValue)=>{
                console.log('sum的值变化了',newValue,oldValue);
            },{immediate:true}) */

            //情况二：监视ref所定义的多个响应式数据
            /* watch([sum,msg],(newValue,oldValue)=>{
                console.log('sum或者msg改变了',newValue,oldValue);
            },{immediate:true}) */

            /* 
                情况三：监视reactive定义的一个响应式数据,
                    1.注意：此处无法获取正确的oldValue 
                    2.注意：强制开启了深度监视(deep配置无效)
            */
            /* watch(person,(newValue,oldValue)=>{
                console.log('person变化了',newValue,oldValue)
            }) */

            //情况四：监视reactive锁定义的一个响应式数据中的某个属性
            /* watch(()=>person.age,(newValue,oldValue)=>{
                console.log('person中的age属性变化了',newValue,oldValue);
            }) */

            //情况五：监视reactive锁定义的一个响应式数据中的某些属性
            /* watch(()=>[person.age,person.name],(newValue,oldValue)=>{
                console.log('person中的age或者name改变了',newValue,oldValue)
            }) */

            //特殊情况
            watch(()=>person.job,(newValue,oldValue)=>{
                console.log('person.job发生变化了',newValue,oldValue)
            },{deep:true})  //此处由于监视的是reactive定义的对象中的某个属性，所以deep配置有效

            //返回一个对象
            return {
                sum,
                msg,
                person
            }
        }
    }
</script>